<template>
  <div class="userEdit">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="110px" size="medium" @submit.native.prevent>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="用户姓名:" prop="loginName" class="required label-right-align">
                <el-input v-model="formData.loginName" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="密码:" prop="password" class="required label-right-align">
                <el-input v-model="formData.password" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="用户姓名:" prop="userName" class="required label-right-align">
                <el-input v-model="formData.userName" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="归属部门:" prop="deptName" class="required label-right-align">
                      <!-- <dept :data="formData" @onConfirm="onDeptConfirm"/> -->
                    <el-input placeholder="请输入内容" v-model="formData.deptName">
                        <el-button @click="selectDialogData" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="手机号码" prop="phoneNumber" class="label-right-align">
                <el-input v-model="formData.phoneNumber" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="短号" prop="shortnumber" class="label-right-align">
                <el-input v-model="formData.shortnumber" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="工号" prop="userNo" class="required label-right-align">
                <el-input v-model="formData.userNo" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="邮箱" prop="email" class="label-right-align">
                <el-input v-model="formData.email" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="类别" prop="postType" class="required label-right-align">
                <el-select v-model="formData.postType" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in postTypeOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="职级" prop="postLevel" class="required label-right-align">
                <el-select v-model="formData.postLevel" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in postLevelOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="归属工作中心" prop="centerNos" class="required label-right-align">
                <el-select v-model="formData.centerNos" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in centerNosOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="登录类型" prop="loginType" class="required label-right-align">
                <el-select v-model="formData.loginType" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in loginTypeOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
             <el-col :span="12" class="grid-cell">
              <el-form-item label="用户性别" prop="sex" class="label-right-align">
                <el-select v-model="formData.sex" class="full-width-input" clearable>
                     <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="用户状态" prop="status" class="label-right-align">
                <el-switch v-model="formData.status"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="grid-cell">
                <el-form-item label="岗位" prop="post" class="label-right-align">
                <el-select v-model="formData.post" class="full-width-input" clearable>
                    <el-option v-for="(item, index) in postTypeOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="角色" prop="role" class="label-right-align">
            <el-checkbox-group v-model="formData.role">
                <el-checkbox v-for="(item, index) in roleOptions" :key="index" :label="item.value"
                :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <div class="static-content-item">
             <el-divider direction="horizontal" content-position="left"></el-divider>
        </div>
        <el-form-item label="备注" prop="remark" class="label-right-align">
            <el-input type="textarea" v-model="formData.remark" rows="3"></el-input>
        </el-form-item>
        <div class="buttons">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button type="danger" @click="cancel">取消</el-button> 
        </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component,Vue,Inject} from 'vue-property-decorator';
import UserDeptApi from "@/api/user-api";
import { namespace } from 'vuex-class';
import Dept from "@/common/form-item/template/select-dialog/index.vue";
import SelectDialog from "@/common/form-item/template/select-dialog/dialog.vue";
import _ from 'lodash';
const tabInfos = namespace('tabInfos');
@Component({
  components: {
      Dept,
      SelectDialog
  },
})
export default class UserList extends Vue {
     @Inject() tabIndexRef!: any;
     @tabInfos.Mutation updateState;
     private userConfig:any=[];
     private ruleForm:any={};
     private formData:any={
            loginName: "",
            password: "",
            userName: "",
            deptId: "",
            deptName:"",
            phoneNumber: "",
            shortnumber: "",
            userNo: "",
            email: "",
            postType: "",
            postLevel: "",
            centerNos: "",
            loginType: "",
            sex: "",
            status: false,
            post: "",
            role: [],
            remark: "",
     }
     private rules={
          loginName: [{
            required: true,
            message: '字段值不可为空',
          }],
          password: [{
            required: true,
            message: '字段值不可为空',
          }],
          userName: [{
            required: true,
            message: '字段值不可为空',
          }],
          deptName: [{
            required: true,
            message: '字段值不可为空',
          }],
          userNo: [{
            required: true,
            message: '字段值不可为空',
          }],
          postType: [{
            required: true,
            message: '字段值不可为空',
          }],
          postLevel: [{
            required: true,
            message: '字段值不可为空',
          }],
          centerNos: [{
            required: true,
            message: '字段值不可为空',
          }],
          loginType: [{
            required: true,
            message: '字段值不可为空',
          }],
          sex: [{
            required: true,
            message: '字段值不可为空',
          }],
      };
     private postTypeOptions= [];
     private postLevelOptions=[];
     private centerNosOptions=[];
     private postOptions=[];
     private sexOptions=[];
     private loginTypeOptions=[];
     private roleOptions=[];
     private deptItem:any={value:""};
     private isShowDialog:boolean=false;
     //生命周期函数
     async created(){
          let postData=await UserDeptApi.selectDictDataByType("sys_post_type");
          let levelData=await UserDeptApi.selectDictDataByType("sys_post_level");
          let loginData=await UserDeptApi.selectDictDataByType("sys_login_type");
          let sexData=await UserDeptApi.selectDictDataByType("sys_user_sex");
          this.postTypeOptions=postData.data.map(item=>{return {label:item.dictLabel,value:item.dictValue}});
          this.postLevelOptions=levelData.data.map(item=>{return {label:item.dictLabel,value:item.dictValue}});
          this.loginTypeOptions=loginData.data.map(item=>{return {label:item.dictLabel,value:item.dictValue}});
          this.sexOptions=sexData.data.map(item=>{return {label:item.dictLabel,value:item.dictValue}});
     }
     //提交表单
     private submitForm() {
         (this.$refs['vForm'] as any).validate(valid => {
              let formData= (this.$refs['vForm'] as any);
              let data=this.formData;
              console.log(data);
         })
      }
      //取消关闭页面
      private cancel(){
           this.tabIndexRef.removeTab("user-edit");
      }
      //重置表单
      resetForm() {
          (this.$refs['vForm'] as any).resetFields()
      }
      //确认部门
      private onDeptConfirm(params:any){
          this.deptItem.value=params.deptName;
          this.formData.deptId=params.id;
          this.formData.deptName=params.deptName;
      }
}
</script>
<style lang="less">
.userEdit{
      display: flex;
      justify-content: center;
     .el-form-item__label{
          font-size: 13px;
     }
    .el-input__inner{
          height: 30px!important;
          line-height: 30px!important;
    }
    .el-form-item{
        margin-bottom: 15px!important;
    }
    .buttons{
        display: flex;
        justify-content: center;
        padding-bottom: 60px;
    }
    margin-top: 20px;
    height: calc(100% - 20px);
    overflow: auto;
    .el-select{
        width: 100%;
    }
    .el-form{
        width: 80%;
    }
    .el-input-number.full-width-input,.el-cascader.full-width-input {
       width: 100% !important;
    }
    .el-form-item--medium {
        .el-radio {
           line-height: 36px !important;
        }
        .el-rate {
        margin-top: 8px;
        }
   }
   .el-form-item--small {
        .el-radio {
        line-height: 32px !important;
        }
        .el-rate {
        margin-top: 6px;
        }
  }
  .el-form-item--mini {
        .el-radio {
        line-height: 28px !important;
        }
        
        .el-rate {
        margin-top: 4px;
        }
  }
  .clear-fix:before,
  .clear-fix:after {
        display: table;
        content: "";
  }
  
  .clear-fix:after {
       clear: both;
  }
  
  .float-right {
        float: right;
  }
}
</style>
<style lang="less" scoped>
  div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
  }
  .label-left-align ::v-deep .el-form-item__label {
        text-align: left;
  }
  
  .label-center-align ::v-deep .el-form-item__label {
        text-align: center;
  }
  
  .label-right-align ::v-deep .el-form-item__label {
       text-align: right;
  }
  .static-content-item {
        min-height: 20px;
        display: flex;
        align-items: center;
        ::v-deep .el-divider--horizontal {
             margin: 0;
        }
  }
</style>
